import React, { useEffect, useRef, useState } from "react";
import { Form, LibAppView } from "../../lib";
import DPlayer from "dplayer";
import FileManage from "../Admin/Component/FileManage";

const Example = LibAppView.withService({
    reqEndPoints: [{
        endPoint: "login.webAuth",
        name: "auto"
    }]
})((props) => {
    const dpRef = useRef<HTMLDivElement>(null);
    const [ videoId, setVideoId ] = React.useState("");
    const [ showFileManage, setShowFileManage ] = useState(false);
    useEffect(() => {
        if(videoId) {
            const refUrl = props.withServiceApi.getUrl("resource.mediaUrl") + "/" + videoId;
            const dpPlayer = new DPlayer({
                container: dpRef.current,
                video: {
                    url: refUrl
                }
            });
        }
    }, [videoId]);
    return (<div>
        <h2>视频播放测试</h2>
        <section>
            <input type="text" onChange={(e) => setVideoId(e.target.value)} />
        </section>
        <div ref={dpRef}></div>
        <button onClick={() => setShowFileManage(!showFileManage)}>{ showFileManage ? "关闭" : "打开" }</button>
        { showFileManage && <FileManage mulitpleSelected onCancel={() => setShowFileManage(false)} onConfirm={(data) => console.log(data)}/> }
    </div>);
});

export default Example;